﻿@page "/listbox/dual-listbox"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the functionalities of the dual list box. Select an item from <b>Group A</b> and click the <b>MoveTo</b> button to move item from <b>Group A</b> to <b>Group B.</b></p>
</SampleDescription>
<ActionDescription>
   <p>The dual list box allows the user to move items between two list boxes. Dual list box can be created by listing items in the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxToolbarSettings.html'>ListBoxToolbarSettings</a> property along with <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope'>Scope</a> property. The supported operations are,</p>
      <ul>
          <li><b>MoveUp</b> -  Moves the selected item in the upward direction.</li>
          <li><b>MoveDown</b> -  Moves the selected item in the downward direction.</li>
          <li><b>MoveTo</b> -  Moves the selected item to the Group B list box.</li>
          <li><b>MoveFrom</b> -  Moves the selected item from Group B list box to Group A.</li>
          <li><b>MoveAllTo</b> -  Moves all the items to the Group B list box.</li>
          <li><b>MoveAllFrom</b> -  Moves all the items from Group B list box to Group A.</li>
      </ul>
    <p> More information about the dual list box functionalities of Blazor ListBox component can be found in the <a href='https://blazor.syncfusion.com/documentation/listbox/dual-listbox/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div id="listbox-control">
        <div class="dual-list-wrapper">
            <div class="dual-list-groupa">
                <h4>Group A</h4>
                <SfListBox Scope="@scope2" DataSource="@groupA" TItem="ListItem" Height="330px" TValue="string[]" @attributes="listbox1Attr">
                    <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings>
                    <ListBoxToolbarSettings Items="@items"></ListBoxToolbarSettings>
                </SfListBox>
            </div>
            <div class="dual-list-groupb">
                <h4>Group B</h4>
                <SfListBox Scope="@scope1" DataSource="@groupB" Height="330px" TItem="ListItem" TValue="string[]" @attributes="listbox2Attr">
                    <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings>
                </SfListBox>
            </div>
        </div>
    </div>
</div>

@code
{
    private string[] items = new string[] { "MoveUp", "MoveDown", "MoveTo", "MoveFrom", "MoveAllTo", "MoveAllFrom" };
    private readonly string scope1 = "scope1";
    private readonly string scope2 = "scope2";
    private readonly Dictionary<string, object> listbox1Attr = new Dictionary<string, object>
    {
        { "id", "scope1" }
    };
    private readonly Dictionary<string, object> listbox2Attr = new Dictionary<string, object>
    {
        { "id", "scope2" }
    };
    private List<ListItem> groupA = new List<ListItem> {
        new ListItem { Name = "Australia", Code = "AU" },
        new ListItem { Name = "Bermuda", Code = "BM" },
        new ListItem { Name = "Canada", Code = "CA" },
        new ListItem { Name = "Cameroon", Code = "CM" },
        new ListItem { Name = "Denmark", Code = "DK" },
        new ListItem { Name = "France", Code = "FR" },
        new ListItem { Name = "Finland", Code = "FI" },
        new ListItem { Name = "Germany", Code = "DE" },
        new ListItem { Name = "Hong Kong", Code = "HK" }
    };
    private List<ListItem> groupB = new List<ListItem> {
        new ListItem { Name = "India", Code = "IN" },
        new ListItem { Name = "Italy", Code = "IT" },
        new ListItem { Name = "Japan", Code = "JP" },
        new ListItem { Name = "Mexico", Code = "MX" },
        new ListItem { Name = "Norway", Code = "NO" },
        new ListItem { Name = "Poland", Code = "PL" },
        new ListItem { Name = "Switzerland", Code = "CH" },
        new ListItem { Name = "United Kingdom", Code = "GB" },
        new ListItem { Name = "United States", Code = "US" }
    };
    public class ListItem
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
}

<style>
    .control-section .dual-list-wrapper {
        width: 60%;
        margin: 0 auto 10px;
        display: flex;
    }

    .dual-list-groupa,
    .dual-list-groupb {
        width: 50%;
    }

    .dual-list-groupb .e-listbox-container,
    .dual-list-groupb h4 {
        width: 87%;
        margin-left: 15px;
    }

    @@media screen and (max-width: 590px) {
        .control-section .dual-list-wrapper {
            width: 100%;
        }

        .dual-list-groupa {
            width: 56%;
        }

        .dual-list-groupb {
            width: 44%;
        }
    }

    @@media screen and (max-width: 400px) {
        .dual-list-groupa {
            width: 59%;
        }

        .dual-list-groupb {
            width: 41%;
        }
    }

    #listbox-control {
        margin: auto;
    }

    @@media screen and (max-width: 590px) {
        #listbox-control {
            width: 100%;
        }
    }
</style>

